.bttn-bordered
  {bttnBaseStyle}
  {bttnMdSize}
  overflow hidden
  border: 1px solid cWhite - rgba(0, 0, 0, .6);
  border-radius 4px
  background transparent
  color: cWhite
  transition all 0.3s anim_func
  &:hover, &:focus
    border-color cWhite - rgba(0, 0, 0, .3)
  &.bttn-xs
    {bttnXsSize}
  &.bttn-sm
    {bttnSmSize}
  &.bttn-md
    {bttnMdSize}
  &.bttn-lg
    {bttnLgSize}
  &.bttn-default
    border-color cWhite - rgba(0, 0, 0, .6)
    color: cWhite
    &:hover, &:focus
      border-color cWhite - rgba(0, 0, 0, .3)
  &.bttn-primary
    border-color cBlue - rgba(0, 0, 0, .6)
    color cBlue
    &:hover, &:focus
      border-color cBlue - rgba(0, 0, 0, .3)
  &.bttn-warning
    border-color cYellow - rgba(0, 0, 0, .6)
    color cYellow
    &:hover, &:focus
      border-color cYellow - rgba(0, 0, 0, .3)
  &.bttn-danger
    border-color cRedLight - rgba(0, 0, 0, .6)
    color cRedLight
    &:hover, &:focus
      border-color cRedLight - rgba(0, 0, 0, .3)
  &.bttn-success
    border-color cGreen - rgba(0, 0, 0, .6)
    color cGreen
    &:hover, &:focus
      border-color cGreen - rgba(0, 0, 0, .3)
  &.bttn-royal
    border-color cPurple - rgba(0, 0, 0, .6)
    color cPurple
    &:hover, &:focus
      border-color cPurple - rgba(0, 0, 0, .3)